<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue水果管理 - 单击表头排序</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div id="app">

    <!-- 弹层部分（新增、修改） -->
    <div class="dialog" style="width:200px;top:10vh;">
      <h3 class="dialog-head">
        <span id="dialogTitle">弹层标题</span>
        <span onclick="dialogShow(false)">&times;</span>
      </h3>

      <form name="fruitForm" class="dialog-body" autocomplete="off">
        <p>
          <label>水果名称</label><br>
          <input type="text" name="name">
        </p>
        <p>
          <label>水果单价</label><br>
          <input type="number" name="price">
        </p>
      </form>

      <p class="dialog-foot" align="right">
        <button onclick="dialogShow(false)">取消</button>
        <button onclick="onSaveData()">确认</button>
      </p>

    </div>

    <h1 align="center">水果管理 </h1>

    <!-- 筛选部分 -->
    <p align="center" class="search">
      <button>批量删除</button>
      <input v-model.trim="query.keyword" type="search" placeholder="请输入关键词" size="20">
      <input v-model="query.startPrice" type="number" placeholder="开始价" class="w80">
      <input v-model="query.endPrice" type="number" placeholder="结束价" class="w80">
      <button>新增</button>
    </p>

    <!-- 列表部分 -->
    <table class="mytable">
      <thead>
        <tr>
          <th width="60"><input type="checkbox"></th>
          <th width="60">编号</th>
          <th :class="thCls" @click="onSort('name','string')">名称</th>
          <th width="120" :class="thCls" @click="onSort('price','number')">单价</th>
          <th width="230">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in sortData" :key="item.id">
          <td><input type="checkbox" :value="item.id" v-model="selectedList"></td>
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{'¥' + item.price.toFixed(2)}}</td>
          <td>
            <button>上移</button>
            <button>下移</button>
            <button>修改</button>
            <button>删除</button>
          </td>
        </tr>

        <!-- 如果没有数据的话显示这个 -->
        <tr v-if="!searchData.length">
          <td colspan="999" align="center">暂无数据</td>
        </tr>

      </tbody>
    </table>

    <!-- 页码部分 -->
    <p align="center"></p>

  </div>

  <script src="js/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {

          // 水果表数据
          fruits: [
            { id: 1, name: '苹果', price: 8, checked: false },
            { id: 2, name: '桔子', price: 1, checked: false },
            { id: 3, name: '香蕉', price: 5, checked: false },
            { id: 4, name: '甘蔗', price: 12, checked: false },
            { id: 5, name: '橙子', price: 6, checked: false }
          ],

          // 选中的列表( 批量删除的id)
          selectedList: [],

          // 查询条件（1. 关键词 2. 价格区间）
          query: {
            keyword: '',    // 关键词
            startPrice: '', // 开始价
            endPrice: ''    // 结束价
          },

          // 表头排序字段
          sortField: '',    // 排序字段
          sortMethod: '',   // number按数字 string按字符串排序
          sortType: 0,      // 0 默认 1 升序 -1 降序
        }
      },

      // 计算属性
      computed: {

        // 搜索数据
        searchData() {
          // 获取用户输入的查询条件
          const { keyword, startPrice, endPrice } = this.query;

          // 监听查询条件变化，重新搜索，返回搜索的结果
          return this.fruits.filter(item => {
            return item.name.includes(keyword) &&
              (startPrice ? item.price >= startPrice : true) &&
              (endPrice ? item.price <= endPrice : true);
          });
        },

        sortData() {

          // 如果排序字段为空，返回搜索结果数据
          if (!this.sortField) return this.searchData;

          // 根据排序字段和排序方法，排序数据
          // 注意：searchData需要浅拷贝，否则排序过后无法恢复到最初的排序之前的状态
          return [...this.searchData].sort((a, b) => {
            if (this.sortMethod === 'number') {
              // 按数值排序
              return (a[this.sortField] - b[this.sortField]) * this.sortType;
            } else {
              // 按字符串排序
              return a[this.sortField].toString().localeCompare(b[this.sortField].toString()) * this.sortType;
            }
          })

        },

        // 表头排序样式
        thCls() {
          return ['sort', { 
              asc: this.sortType === 1, 
              desc: this.sortType === -1 
            }
          ];
        }

      },

      // 方法定义
      methods: {

        // 单击表头排序
        onSort(field, type) {
          this.sortType = this.sortType === 0 ? 1 : (this.sortType === 1 ? -1 : 0);
          this.sortField = field;
          this.sortMethod = type;
        },

      },

    }).mount("#app");
  </script>

</body>

</html>